<template>
  <div class="article-collects">
    <cube-scroll
      ref="scroll"
      :data="data"
      :options="options"
      @pulling-up="onPullingUp"
      v-if="data.length > 0"
    >
      <Pad>
        <News v-for="news in data" :key="news.id" :news="news" />
      </Pad>
    </cube-scroll>
    <no-data v-else :img="require('./img/noData.png')" text="暂无收藏文章哦 ~" />
  </div>
</template>

<script>
import Pad from "@/components/pad";
import News from "@/components/news";
import noData from "@/components/noData";
import { collectNewsList } from "@/api/news";
export default {
  data() {
    return {
      queryParams: {
        type: 1,
        current: 1,
        size: 10
      },
      data: [],
      options: {
        pullUpLoad: true
      }
    };
  },
  components: {
    News,
    Pad,
    noData
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取平台资讯
    getList() {
      collectNewsList(this.queryParams).then(({ data }) => {
        this.data = data.records;
      });
    },
    onPullingUp() {
      console.log("上拉加载");
      this.queryParams.current += 1;
      collectNewsList(this.queryParams).then(({ data }) => {
        this.data = [...this.data, ...data.records];
        this.$refs.scroll.forceUpdate();
        // 已经没有更多页
        if (data.current >= data.pages) {
          this.options.pullUpLoad = false;
          this.$refs.scroll.refresh();
        }
      });
    }
  }
};
</script>

<style lang='scss'>
.article-collects {
  height: 100%;
}
</style>
